<template>
  <div>
    <header>
      <span onclick="window.history.go(-1)"><img src="../assets/images/fanhui.png" alt=""></span>
      <p>录入发票信息</p>
    </header>

    <div class="con">
      <div class="box">
        <div class="input">
          <label>发票代码:</label>
          <input type="number" placeholder="请输入发票代码" v-model="invCode">
        </div>
        <div class="input">
          <label>发票号码:</label>
          <input type="number" placeholder="请输入发票号码" v-model="invNum">
        </div>
        <div class="input">
          <label>发票日期:</label>
          <input type="date" placeholder="请选择发票日期" v-model="issueDate">
        </div>
        <div class="input">
          <label>发票金额:</label>
          <input type="number" placeholder="请输入开票金额" v-model="amount">
        </div>
        <div class="input">
          <label>校验码:</label>
          <input type="number" placeholder="请输入校验码" v-model="validCode">
        </div>
      </div>

      <div class="box">
        <input type="file" class="file" id="photo" required>
        <img src="../assets/images/photo_icon.png" alt="" id="carmen">上传发票
        <div id="click"></div>
        <br>
        <select name="" id="" v-model="invType">
          <option value="0">请选择发票类型</option>
          <option value="1">增值税专票</option>
          <option value="2">增值税普票</option>
          <option value="3">电子发票</option>
          <option value="4">机动车发票</option>
          <option value="2">增值税卷票</option>
          
        </select>
      </div>

      <div class="btn">
        <el-button type="primary" @click="save()">保存</el-button>

      </div>
    </div>

  </div>
</template>
<script>
export default {
    name: "inputInfo",
    data() {
        return {
            invCode: "",
            invNum: "",
            issueDate: "",
            amount: "",
            validCode: "",
            invType: "0",
            uploadFlag: "1",
            invID: "",
            data: ""
        };
    },
    methods: {
        save() {
            // console.log(document.getElementById("click").firstChild.src.split(",")[1])

            if (this.invCode == "") {
                alert("发票代码不能为空");
            } else if (this.invNum == "") {
                alert("发票号码不能为空");
            } else if (this.issueDate == "") {
                alert("发票日期不能为空");
            } else if (this.amount == "") {
                alert("发票金额不能为空");
            } else if (this.validCode == "") {
                alert("校验码不能为空");
            } else if (this.amount == "") {
                alert("发票金额不能为空");
                // } else if (document.getElementById("photo").files[0] == undefined) {
                //   alert("请上传图片")
            } else if (this.invType == "0") {
                alert("请选择发票类型");
            } else {
                var file = document.getElementById("click").firstChild;
                if (document.getElementById("photo").files[0] == undefined) {
                    var strJson = {
                        voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo=",
                        imageContent: this.data.split(",")[1],
                        // invID: document.getElementById("photo").files[0].name,
                        invID: "1",

                        invCode: this.invCode,
                        invNum: this.invNum,
                        issueDate: this.issueDate,
                        amount: this.amount,
                        validCode: this.validCode,
                        invType: this.invType,
                        uploadFlag: this.uploadFlag
                    };
                }else{
                     var strJson = {
                        voucher: "dZDstbiufOy4DZdDvp5bXqBHswuXUYteo4DqfVJj8eo=",
                        imageContent: this.data.split(",")[1],
                        invID: document.getElementById("photo").files[0].name,
                        invCode: this.invCode,
                        invNum: this.invNum,
                        issueDate: this.issueDate,
                        amount: this.amount,
                        validCode: this.validCode,
                        invType: this.invType,
                        uploadFlag: this.uploadFlag

                     }
                }

                var str = JSON.stringify(strJson);
                var base64Data = this.Base64.encode(str);
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/MDInvImageUpload`,
                    data: base64Data
                })
                    .then(response => {
                     
                        alert("录入成功");
                        this.$router.push({
                          name: "myInVoice",
                        });
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    },
    mounted: function() {
        var that = this;
        var img = new Image();
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        document
            .getElementById("photo")
            .addEventListener("change", function(e) {
                var files = this.files;
                var reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function() {
                    img.src = this.result;
                    img.style.width = "80px";
                    img.style.height = "80px";
                    document.getElementById("click").style.display = "block";
                    document.getElementById("carmen").style.opacity = "0";
                    document.getElementById("click").appendChild(img);
                };

                img.onload = function() {
                    var w = img.naturalWidth,
                        h = img.naturalHeight;
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);
                    that.data = canvas.toDataURL("image/jpeg", 0.2);
                };
            });

        var arr = Object.keys(this.$route.params);
        if (arr.length == 0) {
        } else {
            // 年月日的拼接
            var string = this.$route.params.issueDate;

            console.log(string.substring(0, 4));

            this.invType = this.$route.params.invType;
            this.invCode = this.$route.params.invCode;
            this.invNum = this.$route.params.invNum;
            this.issueDate =
                string.substring(0, 4) +
                "-" +
                string.substring(4, 6) +
                "-" +
                string.substring(6, 8);
            this.amount = this.$route.params.amount;
            this.validCode = this.$route.params.validCode;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header span {
    position: absolute;
}

header span img {
    height: 20px;
    margin-left: 10px;
    margin-top: 15px;
}

.con {
    background: #eee;
    width: 100vw;
    height: 92vh;
    overflow: hidden;
}

.con .box {
    background: #fff;
    margin-top: 10px;
    position: relative;
}

.con .box .input {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid #eee;
}

.con .box label {
    font-size: 14px;
    display: inline-block;
    width: 65px;
}

.con .box input {
    width: 50%;
    height: 38px;
    font-size: 14px;
    border: none;
    outline: none;
}

.con .box img {
    width: 80px;
    vertical-align: middle;
    padding: 10px;
}

select {
    width: 100%;
    height: 40px;
    padding-left: 10px;
}

.btn {
    width: 100vw;
    text-align: center;
    margin-top: 50px;
}

.con .box input.file {
    position: absolute;
    width: 80px;
    height: 80px;
    padding: 10px;
    opacity: 0;
}

#click {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    text-align: center;
}

.con .box #click img {
    width: 80px;
    height: 80px;
}
</style>
